<template>
	<div>
		我是组件demo2
		<slot name = "heard"></slot>
		<slot name = "main"></slot>
		<slot name = "foot"></slot>
        <slot :dataObj = "dataObj"></slot>
		<!-- <slot  :dataDefault = "dataDefault"></slot> -->
		
		<div class="divo" ref = "numit" style="height: 50px">
			<div style="height: 100px"></div>
		</div>	
		<div ref = "div1" style="background-color: blue">我是ref</div>
		<input type="" name="" ref = "input1" >
		<button @click = "add">add</button>
		<button @click = "usePare">调用父组件事件</button>
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				count:0,
	             dataDefault:{
	              	name:'chacao',
	              	age:'19'
	            },
	            dataObj:{
	            	name:'shiyan',
	            	num:999
	            }
			}
		},
		created(){
			
		},
		mounted(){
			//  几个vue   ref 的用途 
			//获取高度值
			var height= this.$refs.numit.offsetHeight; //100

			//获取元素样式值,element 为元素ref="element"
			var heightCss = window.getComputedStyle(this.$refs.numit).background; // 100px
            // rgb(255, 0, 255) none repeat scroll 0% 0% / auto padding-box border-box
			//获取元素内联样式值
			var heightStyle =this.$refs.numit.style.height; // 100px
		
			 let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
			let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			 
			this.$refs.div1.style.height = h +'px';
           // vue iview里面的一个用到ref 的地方
           // <Form ref="abcFormRule" :model="abcFormItem" :rules="abcFormRule" :label-width="100">
           // this.$refs['abcFormRule'].validate((valid) => {
           // 绑定input  获取input 的值
           console.log(this.$refs.input1.value)  //this.$refs.input1 减少获取dom节点的消耗 获取value的值
		},
		methods:{
			add(){
				//$refs的应用
                this.$refs.input1.value = this.count++
			},
			usePare(){
				this.$emit('chang')
			}

		}
		
	}
</script>
<style type="text/css">
	.divo{
		background: #f0f;		
	}
</style>